import { useRef, useState } from "react";
import { Line } from "./charts/index";
import { registeredTheme } from "./charts/theme";

const Demo: React.FC = () => {
  const chartRef = useRef<any>();
  const [loading, setLoading] = useState(false);
  const [height, setHeight] = useState<string | number>(500);
  const [width, setWidth] = useState<string | number>(500);
  const [theme, setTheme] = useState("walden");
  const [data, setData] = useState<any[]>([
    {
      __timestamp: 1619827200000,
      "AVG(采购毛利率%)": 0.03376177370030581,
      "COUNT_DISTINCT(product_code)": 648,
    },
  ]);

  const onEvents = {
    brushEnd: function (e: any) {
      const area = e.areas.pop();
      console.log(area);
    },
  };

  function onReady(instance: any) {
    chartRef.current = instance;

    instance.dispatchAction({
      type: "takeGlobalCursor",
      key: "brush",
      brushOption: {
        brushType: "lineX",
      },
    });
  }
  const config = {
    xField: "__timestamp",
    yFields: ["AVG(采购毛利率%)", "COUNT_DISTINCT(product_code)"],
    brushable: true,
  };

  function onRandomWidthAndHeight() {
    setHeight(Math.floor(Math.random() * 500));
    setWidth(`${Math.floor(Math.random() * 100)}%`);
  }

  function onLoadData() {
    setLoading(true);
    setTimeout(() => {
      setData([
        {
          __timestamp: 1619827200000,
          "AVG(采购毛利率%)": 0.03376177370030581,
          "COUNT_DISTINCT(product_code)": 648,
        },
        {
          __timestamp: 1619913600000,
          "AVG(采购毛利率%)": 0.1653400966183575,
          "COUNT_DISTINCT(product_code)": 905,
        },
        {
          __timestamp: 1620000000000,
          "AVG(采购毛利率%)": 0.15682827586206888,
          "COUNT_DISTINCT(product_code)": 880,
        },
        {
          __timestamp: 1620086400000,
          "AVG(采购毛利率%)": -3.182549002848999,
          "COUNT_DISTINCT(product_code)": 513,
        },
        {
          __timestamp: 1620172800000,
          "AVG(采购毛利率%)": 0.1739844914400806,
          "COUNT_DISTINCT(product_code)": 862,
        },
        {
          __timestamp: 1620259200000,
          "AVG(采购毛利率%)": 0.024442233009708745,
          "COUNT_DISTINCT(product_code)": 670,
        },
      ]);
      setLoading(false);
    }, 3000);
  }

  return (
    <div>
      <div style={{ margin: "16px 0" }}>
        <span style={{ display: "inline-block", padding: "0 5px" }}>1.</span>
        <button onClick={onRandomWidthAndHeight}>随机改变容器宽高</button>
        <span style={{ display: "inline-block", padding: "0 5px" }}>2.</span>
        <button onClick={onLoadData}>模拟拉取数据</button>
        <span style={{ display: "inline-block", padding: "0 5px" }}>3.</span>
        <button
          onClick={() => {
            console.log(chartRef.current);
          }}
        >
          onReady获取Ref
        </button>
        <span style={{ display: "inline-block", padding: "0 5px" }}>
          4.换主题
        </span>
        <select
          style={{ height: 25 }}
          value={theme}
          onChange={(e) => setTheme(e.target.value)}
        >
          {registeredTheme.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
        </select>
      </div>
      <div style={{ height, width, margin: "0 auto" }}>
        <Line
          config={config}
          data={data}
          loading={loading}
          theme={theme}
          onEvents={onEvents}
          onReady={onReady}
        />
      </div>
    </div>
  );
};

export default Demo;
